<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <link rel="stylesheet" href="preview/css/swiper.min.css"/>
    <script src="preview/js/jquery.min.js"></script>
    <script src="preview/js/rem.js"></script>

    <script src="preview/js/swiper.min.js"></script>
    <title>超星-图书馆大数据展示平台</title>
    <style>
        .swiper-container-index{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="serviceTime" style="width:19.2rem;height: 10.8rem;position: relative;">
    <div class="swiper-container swiper-container-index">
        <div class="swiper-wrapper">
            <!-- 第一屏  swiper-no-swiping  -->
            <div class="swiper-slide">
                <div style="width: 100%;height: 100%;position: absolute;left:0;top:0;z-index: 10"></div>
                <div class="serviceTime">
                    <!-- 标题-->
                    <iframe id="title" src="logo.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 天气-->
                    <iframe id="weather" src="weather.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 时间-->
                    <iframe id="time" src="time.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 馆舍数据-->
                    <iframe id="house_data" src="house_data.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 借阅数据-->
                    <iframe id="borrow_data" src="borrow_data.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 服务数据-->
                    <iframe id="service_data" src="service_data.html" frameborder="0" scrolling="no"></iframe>
                </div>
            </div>
            <!-- 第二屏-->
            <div class="swiper-slide">
                <div style="width: 100%;height: 100%;position: absolute;left:0;top:0;z-index: 10"></div>
                <div class="serviceTime">
                    <!-- 标题-->
                    <iframe id="title" src="logo.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 天气-->
                    <iframe id="weather" src="weather.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 时间-->
                    <iframe id="time" src="time.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 馆舍数据-->
                    <iframe id="arrivedLib_data" src="arrivedLib_data.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 借阅数据-->
                    <iframe id="rank_data" src="rank_data.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 服务数据-->
                    <iframe id="weChat_data" src="weChat_data.html" frameborder="0" scrolling="no"></iframe>
                </div>
            </div>
            <div class="swiper-slide">
                <div style="width: 100%;height: 100%;position: absolute;left:0;top:0;z-index: 10"></div>
                <div class="serviceTime">
                    <!-- 标题-->
                    <iframe id="title" src="logo.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 天气-->
                    <iframe id="weather" src="weather.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 时间-->
                    <iframe id="time" src="time.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 馆舍数据-->
                    <iframe id="down_data" src="down_data.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 借阅数据-->
                    <iframe id="notice_data" src="notice_data.html" frameborder="0" scrolling="no"></iframe>
                    <!-- 服务数据-->
                    <iframe id="reco_data" src="reco_data.html" frameborder="0" scrolling="no"></iframe>
                    <iframe id="history_data" src="history_data.html" frameborder="0" scrolling="no"></iframe>
                    <iframe id="famous_data" src="famous_data.html" frameborder="0" scrolling="no"></iframe>
                </div>


            </div>
            <!-- 分页器  -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    function getRem(prem,pwidth){
        var html = document.getElementsByTagName("html")[0];
        var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth/pwidth*prem + "px";
        //console.log("html-fontSize-----"+oWidth/pwidth*prem + "px"+str);
        return oWidth/pwidth*prem;
    }
    window.onresize = function(e){
        getRem(100,1920);
    };
    window.onload = function(e){
        getRem(100,1920);
        //阻止浏览器默认行为触发的通用方法
        /////渲染完数据实例化swiper
        var swiper = new Swiper('.swiper-container-index', {
            autoplay: {
                delay: 10000,
//                stopOnLastSlide: false,
                disableOnInteraction: true,////用户手动操作之后自动播放不会停止
            },
            loop : false,
//            noSwiping : true,
            pagination: {////分页器
                el: '.swiper-pagination',
                type: 'fraction',
            },
        });



    }
</script>
</html>